<template>
  <div class="person-box">
    <!-- 人员到岗情况 -- 人事 -->
    <div class="title">人员到岗情况</div>
    <div class="shadow main-box p20 mt20">
      <div class="search">
        <el-date-picker v-model="queryParams.day" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" @change="changeDate"></el-date-picker>
      </div>

      <div class="grid-content">
        <div class="grid-item" v-for="(item,index) in fieldsList" :key="index">
          <div class="num">{{item.field == 'rate' ? dataCount[item.field]+'%':dataCount[item.field]}}</div>
          <div class="label">{{item.label}}</div>
        </div>
      </div>

      <div class="list-wrap">
        <div class="item-box mt20" v-for="(item,index) in dataList" :key="index">
          <div class="title">{{item.zoneName}}</div>
          <div class="shadow content-box">
            <div class="item">
              <span class="text">全部人数：</span>
              <span class="value">{{item.userNum}}</span>
            </div>
            <div class="item">
              <span class="text">到岗率：</span>
              <span class="value">{{item.rate}}%</span>
            </div>
            <div class="item">
              <span class="text">打卡人数：</span>
              <span class="value">{{item.punchCardNum}}</span>
            </div>
            <div class="item">
              <span class="text">未打卡：</span>
              <span class="value">{{item.loseCardNum}}</span>
            </div>
            <div class="item">
              <span class="text">迟到：</span>
              <span class="value">{{item.overTimeNum}}</span>
            </div>
            <div class="item">
              <span class="text">请假：</span>
              <span class="value">{{item.leaveNum}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getCountByDay, getGroupZoneCode } from "@/api/home";

const fields = [{field: "userNum", label: '全部人数'}, {field: "punchCardNum", label: '打卡人数'}, {field: "overTimeNum", label: '迟到'}, {field: "leaveNum", label: '请假'}, {field: "rate", label: '到岗率'},{field: "loseCardNum", label: '未打卡'}]
export default {
  data() {
    return {
      queryParams:{},
      dataCount: {},
      fieldsList: fields,
      dataList: []
    }
  },
  mounted() {
    this.getCountByDay()
    this.getGroupZoneCode()
  },
  methods: {
    async getCountByDay() {
      try {
        const res = await getCountByDay(this.queryParams)
        this.dataCount = res.data;
      } catch (error) {

      }
    },
    async getGroupZoneCode() {
      try {
        const res = await getGroupZoneCode(this.queryParams)
        this.dataList = res.data || []
      } catch (error) {

      }
    },
    changeDate() {
      this.getCountByDay()
      this.getGroupZoneCode()
    },

  }
}
</script>
<style lang="scss" scoped>
.person-box {
  padding-bottom: 40px;
}
.grid-content {
  display: flex;
  flex-wrap: wrap;
  .grid-item {
    width: 33.33%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-right: 1px solid RGBA(183, 192, 223, 1);
    margin: 15px 0;
    &:nth-of-type(3n) {
      border-right: 0;
    }
  }
}

.list-wrap {
  .item-box {
    .title {
      padding-left: 15px;
      border-left: 2px solid rgba(255, 188, 62, 1);
      line-height: 1;
      font-weight: 550;
    }
  }
  .content-box {
    display: flex;
    flex-wrap: wrap;
    background: rgba(183,192,223,0.1);
    border-radius: 8px;
    margin-top: 10px;
    .item {
      width: 50%;
      padding: 9px 15px;
      .text {
        font-size: 14px;
        color: rgba(130, 137, 158, 1);
      }
      .value {
        font-size: 14px;
        color: #333;
      }
    }
  }
}
</style>
